<template>
	<view class="content" v-if="pageShow==1">		
			<view class="card-box" v-show="PermissionShow">
				<div class="main-box" @click="slowDownPermission()">
					<view class="main-title">
						{{PermissionName}}
					</view>
					<u-icon id="ConterIconUp" style="padding-top: 7rpx; " name="arrow-up"></u-icon>
					<u-icon id="ConterIconDown" style="padding-top: 7rpx; display: none;" name="arrow-down"></u-icon>
				</div>
				<view class="main-card" id="mainCard">
					<view class="main-card-row1">
						<view class="" @click="openHightPortPage('AssetExData')">
							<span>{{AssetData.ExposeCount}}</span>
							<span>暴露面数</span>
						</view>
						<view class="" @click="openHightPortPage('AssetData')">
							<span style="color: #FF3B2F;" >{{AssetData.PortCount}}</span>
							<span>高危端口</span>
						</view>
						<view class="" @click="openAssetWebPage('AssetData')">
							<span style="color: #FFCC00;">{{AssetData.WebCount}}</span>
							<span>暴露Web页</span>
						</view>
						<view class="" @click="openNetworkAddressPuPage('AssetDataPu')">
							<span >{{AssetData.PublicNetCount}}</span>
							<span>公网地址</span>
						</view>
						<view class="" @click="openNetworkAddressInPage('AssetDataIn')">
							<span >{{AssetData.InternalNetCount}}</span>
							<span>内网地址</span>
						</view>
					</view>
					<view class="main-card-row2">
						<view class="row2-left" @click="openAssetCollectionFailPage('AssetAllData')">
							<span style="margin-bottom: 8rpx; font-weight: 700; font-size: 16px;">{{AssetData.CjCount}}</span>
							<span class="row2-label">采集总数</span>
						</view>
						<view class="division-line"></view>
						<view class="row2-right">
							<view style="margin-bottom: 22rpx;" class="" @click="openAssetCollectionFailPage('AssetSuccessData')">
								<span class="row2-label">采集成功：</span>
								<span style="color: #5cf976;">{{AssetData.CjSuccessCount}}</span>
								<span style="color: #5cf976;">({{AssetData.CjSuccessRate}})</span>
							</view>
							<view class="" @click="openAssetCollectionFailPage('AssetFailData')">
								<span class="row2-label">采集失败：</span>
								<span style="color: #FF3B2F;">{{AssetData.CjFailCount}}</span>
								<span style="color: #FF3B2F;">({{AssetData.CjFailRate}})</span>
							</view>
						</view>
					</view>
				</view>
			</view>
<!-- 			<view class="refresh-time">
				更新时间：{{createTime}}
			</view> -->
			<view class="card-box" v-show="DepartmentAssetsDetailsShow">
				<div class="main-box" @click="slowDownDeptAssetsDetails()">
					<view class="main-title">
						{{DepartmentAssetsDetailsName}}
					</view>
					<u-icon id="ConterIconDADUp" style="padding-top: 7rpx; " name="arrow-up"></u-icon>
					<u-icon id="ConterIconDADDown" style="padding-top: 7rpx; display: none;" name="arrow-down"></u-icon>
				</div>
				<div id="mainCardDAD">
				<view class="card" v-for="(item, index) in DeptAssetDetailsData" :key="index" >
					<view class="dept-name" @click="slowDown(index)">
						<div style="display: flex;">
							<img style="width: 64rpx; margin-right: 30rpx;" src="@/static/deptIcon2.png" alt="" />
							<view style="padding-top: 5rpx;" class="">{{item.DeptName}}</view>
						</div>
						<u-icon :id="`ConterIconUp${index}`" style="padding-top: 7rpx; display: none;" name="arrow-up"></u-icon>
						<u-icon :id="`ConterIconDown${index}`" style="padding-top: 7rpx;" name="arrow-down"></u-icon>
					</view>
					<view class="admin-card-content" v-show="!`showConter${index}`" :id="`deptIcon${index}`">
						<view class="felx-box" style="border-bottom: 1px solid #F6F6F6;">
							<view class="" @click="openHightPortPage('DeptAssetDetailsExData',item.DeptId)">
								<span>{{item.ExposeCount}}</span>
								<span>暴露面数</span>
							</view>
							<view class="" @click="openHightPortPage('DeptAssetDetailsData',item.DeptId)">
								<span style="color: #FF4D4D;">{{item.PortCount}}</span>
								<span>高危端口</span>
							</view>
							<view class="" @click="openAssetWebPage('DeptAssetDetailsData',item.DeptId)">
								<span style="color: #F37A00;">{{item.WebCount}}</span>
								<span>暴露Web页</span>
							</view>
						</view>
						<view class="felx-box">
							<view class="" @click="openNetworkAddressPuPage('DeptAssetDetailsDataPu',item.DeptId)">
								<span>{{item.PublicNetCount}}</span>
								<span>公网地址</span>
							</view>
							<view class="" @click="openNetworkAddressInPage('DeptAssetDetailsDataIn',item.DeptId)">
								<span>{{item.InternalNetCount}}</span>
								<span>内网地址</span>
							</view>
						</view>
						<view class="chart-box">
							<view  style="width:200px; height: 200px" @click="openAssetCollectionFailPage('DeptAssetDetailsAllData',item.DeptId)"><l-echart style="width:200px; height: 200px;" :ref="`chartRef${index}`" ></l-echart>
							</view>
							<view class="chart-tips" style="width: 50%; height: 200px">
								<span class="tips-num" style="color: #00A669;" @click="openAssetCollectionFailPage('DeptAssetDetailsSuccessData',item.DeptId)">{{item.CjSuccessCount}} / {{item.CjSuccessRate}}</span>
								<span style="margin-bottom: 20rpx;">采集成功数/合格率</span>
								<span class="tips-num" style="color: #EB7C21;" @click="openAssetCollectionFailPage('DeptAssetDetailsFailData',item.DeptId)">{{item.CjFailCount}} / {{item.CjFailRate}}</span>
								<span>采集失败数/失败率</span>
							</view>
						</view>
					</view>
				</view>
				</div>
			</view>
			<view class="card-box" v-show="DepartmentAssetsShow">
				<view class="main-title">
					{{DepartmentAssetsName}}
				</view>
				<view class="card-title">
					暴露情况
				</view>
				<view class="card">
						<view class="felx-box" style="border-bottom: 1px solid #F6F6F6;">
							<view class="" @click="openHightPortPage('DeptAssetExData')">
								<span >{{DeptAssetData.ExposeCount}}</span>
								<span>暴露面数</span>
							</view>
							<view class="" @click="openHightPortPage('DeptAssetData')">
								<span style="color: #FF4D4D;">{{DeptAssetData.PortCount}}</span>
								<span>高危端口</span>
							</view>
							<view class="">
								<span style="color: #F37A00;" @click="openAssetWebPage('DeptAssetData')">{{DeptAssetData.WebCount}}</span>
								<span>暴露Web页</span>
							</view>
						</view>
						<view class="felx-box">
							<view class="" @click="openNetworkAddressPuPage('DepartmentAssetsPu')">
								<span>{{DeptAssetData.PublicNetCount}}</span>
								<span>公网地址</span>
							</view>
							<view class="" @click="openNetworkAddressInPage('DepartmentAssetsIn')">
								<span>{{DeptAssetData.InternalNetCount}}</span>
								<span>内网地址</span>
							</view>
						</view>
				</view>
				<view class="card-title">
					采集情况
				</view>
				<view class="card">
						<view class="chart-box">
							<view style="width: 50%; height: 200px" @click="openAssetCollectionFailPage('DeptAssetAllData')"><l-echart ref="chartRefDepartmentcaiji"></l-echart>
							</view>
							<view class="chart-tips" style="width: 50%; height: 200px">
								<span class="tips-num" style="color: #00A669;"@click="openAssetCollectionFailPage('DeptAssetSuccessData')">{{DeptAssetData.CjSuccessCount}}/ {{DeptAssetData.CjSuccessRate}}</span>
								<span style="margin-bottom: 20rpx;">采集成功数/合格率</span>
								<span class="tips-num" style="color: #EB7C21;" @click="openAssetCollectionFailPage('DeptAssetFailData')">{{DeptAssetData.CjFailCount}}/ {{DeptAssetData.CjFailRate}}</span>
								<span>采集失败数/失败率</span>
							</view>
						</view>
				</view>	
			</view>			
			<view class="card-box" v-show="PersonalAssetsShow">
				<view class="main-title">
					{{PersonalAssetsName}}
				</view>
				<view class="card-title">
					暴露情况
				</view>
				<view class="card">
						<view class="felx-box" style="border-bottom: 1px solid #F6F6F6;">
							<view class="" @click="openHightPortPage('UserAssetExData')">
								<span >{{UserAssetData.ExposeCount}}</span>
								<span>暴露面数</span>
							</view>
							<view class="" @click="openHightPortPage('UserAssetData')">
								<span style="color: #FF4D4D;">{{UserAssetData.PortCount}}</span>
								<span>高危端口</span>
							</view>
							<view class="" @click="openAssetWebPage('UserAssetData')">
								<span style="color: #F37A00;">{{UserAssetData.WebCount}}</span>
								<span>暴露Web页</span>
							</view>
						</view>
						<view class="felx-box">
							<view class="" @click="openNetworkAddressPuPage('UserAssetPu')">
								<span>{{UserAssetData.PublicNetCount}}</span>
								<span>公网地址</span>
							</view>
							<view class="" @click="openNetworkAddressInPage('UserAssetIn')">
								<span>{{UserAssetData.InternalNetCount}}</span>
								<span>内网地址</span>
							</view>
						</view>
				</view>
				<view class="card-title">
					采集情况
				</view>
				<view class="card">
						<view class="chart-box">
							<view style="width: 50%; height: 200px" @click="openAssetCollectionFailPage('UserAssetAllData')"><l-echart ref="chartRefPersoncaiji"></l-echart>
							</view>
							<view class="chart-tips" style="width: 50%; height: 200px">
								<span class="tips-num" style="color: #00A669;"@click="openAssetCollectionFailPage('UserAssetSuccessData')">{{UserAssetData.CjSuccessCount}}/ {{UserAssetData.CjSuccessRate}}</span>
								<span style="margin-bottom: 20rpx;">采集成功数/合格率</span>
								<span class="tips-num" style="color: #EB7C21;" @click="openAssetCollectionFailPage('UserAssetFailData')">{{UserAssetData.CjFailCount}}/ {{UserAssetData.CjFailRate}}</span>
								<span>采集失败数/失败率</span>
							</view>
						</view>
				</view>	
			</view>
			
	</view>
	<u-loading v-else-if="pageShow==2" class="loading" size="80" mode="flower" :show="loading" color="primar"></u-loading>
	<u-empty  v-else-if="pageShow==0" style="margin-top: 100px;" iconSize='200' textSize='18' mode="data" icon="@/static/empty.png" text='暂无数据'></u-empty>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import { baseUrl } from '@/common/request/config';
    import popModal from '../pop-modal/pop-modal.vue';
	import $ from 'common/utils/jquery-3.5.1.min.js'
	export default {
		components: {
			  popModal
			},
		// props: ["permissionData"],
		data() {
			return {
				slowDownPtype:true,
				slowDownDADtype:true,
				pageShow:0,
				PermissionShow:false,
				DepartmentAssetsShow:false,
				DepartmentAssetsDetailsShow:false,
				PersonalAssetsShow:false,
				popshow: true,
				show:true,
				PermissionName:'',
				PersonalAssetsName:'',
				DepartmentAssetsName:'',
				DepartmentAssetsDetailsName:'',
				title: '数据统计',
				content:`空山新雨后<br>
						天气晚来秋`,
				iconName:"arrow-down",
				loading: false,
				option: {},
				option1: {},
				showConter0:true,
				showConter1:true,
				showConter2:true,
				showConter3:true,
				showConter4:true,
				showConter5:true,
				showConter6:true,
				showConter7:true,
				showConter8:true,
				showConter9:true,
				showConter10:true,
				showConter11:true,
				showConter12:true,
				showConter13:true,
				showConter14:true,
				showConter15:true,
				showConter16:true,
				showConter17:true,
				showConter18:true,
				showConter19:true,
				showConter20:true,
				showConter21:true,
				showConter22:true,
				showConter23:true,
				showConter24:true,
				showConter25:true,
				showConter26:true,
				showConter27:true,
				showConter28:true,
				showConter29:true,
				showConter30:true,
				showConter31:true,
				showConter32:true,
				showConter33:true,
				showConter34:true,
				showConter35:true,
				AssetData:{},
				DeptAssetDetailsData:[],
				UserAssetData:[],
				DeptAssetData:[],
			};
		},
		onLoad() {
		},
		activated() {
			this.changeTitle('数据统计')
		},
		created () {
			let that=this		
			this.getpermission()
		},
		// 组件能被调用必须是组件的节点已经被渲染到页面上
		methods: {
			changeTitle(newTitle) {
			  this.title = newTitle;
			  uni.setNavigationBarTitle({
				title: this.title
			  });
			},
			async getpermission() {// 获取当前用户标签权限
				let that=this
				this.$request.setConfig({
					header: {
						'content-type': 'application/json',
						Authorization: 'Bearer ' + uni.getStorageSync('token'),
					},
				});
				let data = await this.$api.getpermission(); //已经封装好的api
				if (data.Code == 200) {
					// this.loading = false
					this.permissionData=data.Data
					that.permissionData.forEach((e, index) => {
						  if (e.PermissionName == '资产') {
							  that.pageShow=1						 
							  if(e.Children&&e.Children.length>0){
								  e.Children.forEach((item, index) => {
									  // this.pageShow=2
									  if(item.PermissionName=="管理员-资产汇总"){
										  that.PermissionName=item.PermissionName
										  // that.PermissionShow=true
										  that.getAssetData()
									  }else if(item.PermissionName=="管理员-部门资产明细"){
										  that.DepartmentAssetsDetailsName=item.PermissionName
										  // that.DepartmentAssetsDetailsShow=true	
										  that.getDeptAssetDetailsData()
									  }else if(item.PermissionName=="部门管理员-部门资产"){
										  that.DepartmentAssetsName=item.PermissionName
										  that.DepartmentAssetsShow=true	
										  that.getDepartmentAssetData()
									  }else if(item.PermissionName=="个人-个人资产汇总"){
										  that.PersonalAssetsName=item.PermissionName
										  that.PersonalAssetsShow=true
										  that.getUserAssetData()	
									  }
									  
								  })							  
							  }
						   }
						})	
				} else {
					uni.showToast({
						title: '请求失败!',
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
		    openHightPortPage(type,id) {//获取管理员-高危端口明细
				this.$router.push({
				   path:'/pages/HightPortPage/index',query:{
				   type: type,
				   DeptID:id
				   }});
			},
			openAssetWebPage(type,id) {//获取管理员-暴露Web页明细
				this.$router.push({
				   path:'/pages/AssetWebPage/index',query:{
				   type: type,
				   DeptID:id
				   }});
			},
			openAssetCollectionFailPage(type,id) {//获取管理员-采集失败明细
				this.$router.push({
				   path:'/pages/AssetCollectionFail/index',query:{
				   type: type,
				   DeptID:id
				   }});
			},
			openNetworkAddressInPage(type,id) {//管理员内网地址明细
				this.$router.push({
				   path:'/pages/NetworkAddressInPage/index',query:{
				   type: type,
				   DeptID:id
				   }});
			},
			openNetworkAddressPuPage(type,id) {//管理员公网地址明细
				this.$router.push({
				   path:'/pages/NetworkAddressPuPage/index',query:{
				   type: type,
				   DeptID:id
				   }});
			},
			slowDownDeptAssetsDetails(){
				this.slowDownDADtype=!this.slowDownDADtype
				console.log(this.slowDownPtype,'this.slowDownPtype888')
				document.getElementById('ConterIconDADUp').style.marginTop = 0
				document.getElementById('ConterIconDADDown').style.marginTop = 0
				if(!this.slowDownDADtype){
					document.getElementById('ConterIconDADUp').style.display = "none"
					document.getElementById('ConterIconDADDown').style.display = "block"
					document.getElementById('mainCardDAD').style.display = "none"
				}else{
					document.getElementById('ConterIconDADUp').style.display = "block"
					document.getElementById('ConterIconDADDown').style.display = "none"
					document.getElementById('mainCardDAD').style.display = "block"
				}
				this.$forceUpdate();
			},
			slowDownPermission(){
				this.slowDownPtype=!this.slowDownPtype
				console.log(this.slowDownPtype,'this.slowDownPtype999')
				document.getElementById('ConterIconUp').style.marginTop = 0
				document.getElementById('ConterIconDown').style.marginTop = 0
				if(!this.slowDownPtype){
					document.getElementById('ConterIconUp').style.display = "none"
					document.getElementById('ConterIconDown').style.display = "block"
					document.getElementById('mainCard').style.display = "none"
				}else{
					document.getElementById('ConterIconUp').style.display = "block"
					document.getElementById('ConterIconDown').style.display = "none"
					document.getElementById('mainCard').style.display = "block"
				}
				this.$forceUpdate();
			},
			slowDown(index){
				console.log(this[`showConter${index}`],'index')
				this[`showConter${index}`]=!this[`showConter${index}`]
				document.getElementById(`ConterIconUp${index}`).style.marginTop = 0
				document.getElementById(`ConterIconDown${index}`).style.marginTop = 0
				if(this[`showConter${index}`]){		
					document.getElementById(`ConterIconUp${index}`).style.display = "none"
					document.getElementById(`ConterIconDown${index}`).style.display = "block"
					document.getElementById(`deptIcon${index}`).style.display = "none"
				}else{
					document.getElementById(`ConterIconUp${index}`).style.display = "block"
					document.getElementById(`ConterIconDown${index}`).style.display = "none"					
					document.getElementById(`deptIcon${index}`).style.display = "block"
					 this.initEcharts(index)
				}
				 // this.$nextTick(() => {
				 //    this.initEcharts(index)
				 //  })
				

			},
			async initEcharts(index) {				
				// chart 图表实例不能存在data里
				this.getOption({
					data1: this.DeptAssetDetailsData[index].CjSuccessCount,
					data2: this.DeptAssetDetailsData[index].CjFailCount,
					total: this.DeptAssetDetailsData[index].CjCount,
				})
				// const  charts = echarts.init(document.getElementById(`chartRef${index}`))
				const  charts = await this.$refs[`chartRef${index}`][0].init(echarts);
				charts.resize() 
				charts.setOption(this.option)
			},
			async getAssetData() {//获取管理员-资产汇总
			    this.loading=true			
				let data = await this.$api.getAssetData(); //已经封装好的api
				if (data.Code == 200) {
					// this.loading = false
					this.AssetData=data.Data
					this.PermissionShow=true
					this.pageShow=1
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			async getDeptAssetDetailsData() {//获取部门-资产明细
			    this.loading=true
				let data = await this.$api.getDeptAssetDetailsData(); //已经封装好的api
				if (data.Code == 200) {
					// this.loading = false
					this.DeptAssetDetailsData=data.Data
					this.DepartmentAssetsDetailsShow=true	
					this.pageShow=1
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			async getUserAssetData() {//获取个人-资产明细
			    this.loading=true
				let data = await this.$api.getUserAssetData(); //已经封装好的api
				if (data.Code == 200) {
					// this.loading = false
					
					this.UserAssetData=data.Data
					// this.PersonalAssetsShow=true
					// chart 图表实例不能存在data里
					console.log(this.UserAssetData.CjCount,'this.UserAssetData.CjCount999')
					this.getOption1({
						data1: this.UserAssetData.CjSuccessCount,
						data2: this.UserAssetData.CjFailCount,
						total: this.UserAssetData.CjCount,
					})
					const chart = await this.$refs.chartRefPersoncaiji.init(echarts);
					chart.setOption(this.option1)
					this.pageShow=1
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			async getDepartmentAssetData() {//获取部门-资产明细
			    this.loading=true
				let data = await this.$api.getDeptUserAssetData(); //已经封装好的api
				if (data.Code == 200) {
					// this.loading = false
					
					this.DeptAssetData=data.Data
					// this.DepartmentAssetsShow=true
					// chart 图表实例不能存在data里
					this.getOption({
						data1: this.DeptAssetData.CjSuccessCount,
						data2: this.DeptAssetData.CjFailCount,
						total: this.DeptAssetData.CjCount,
					})
					const chart = await this.$refs.chartRefDepartmentcaiji.init(echarts);
					chart.setOption(this.option)
					this.pageShow=1
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			getOption(data) {
				let seriesData = data.total ? [{
						value: data.data1,
						name: '采集成功数'
					},
					{
						value: data.data2,
						name: '采集失败数'
					},
				] : null
				this['option'] = {
					color: ['#00A669', '#EB7C21'],
					series: [{
							type: 'pie',
							connectNulls: false,
							radius: ['60%', '75%'],
							label: {
								show: false
							},
							data: seriesData
						},
						{
							type: 'pie',
							radius: ['60%', '75%'],
							label: {
								normal: {
									show: true,
									position: 'center',
									formatter: (params) => {
										return [
											`{a|${this.$utils.commafy(data.total)}}`,
											`{b|采集总数}`
										].join('\n');
									},
									rich: {
										a: {
											fontSize: 24,
											color: '#5F6475',
											fontWeight: 'bold',
											padding: [0, 0, 5, 0]
										},
										b: {
											fontSize: 12,
											color: '#555'
										}
									}
								}
							},
							data: [{
								value: 1,
								itemStyle: {
									color: 'transparent'
								}
							}]
						}
					]
			
				}
			},
			getOption1(data) {
				let seriesData = data.total ? [{
						value: data.data1,
						name: '采集成功数'
					},
					{
						value: data.data2,
						name: '采集失败数'
					},
				] : null
				this.option1 = {
					color: ['#00A669', '#EB7C21'],
					series: [{
							type: 'pie',
							connectNulls: false,
							radius: ['60%', '75%'],
							label: {
								show: false
							},
							data: seriesData
						},
						{
							type: 'pie',
							radius: ['60%', '75%'],
							label: {
								normal: {
									show: true,
									position: 'center',
									formatter: (params) => {
										return [
											`{a|${this.$utils.commafy(data.total)}}`,
											`{b|采集总数}`
										].join('\n');
									},
									rich: {
										a: {
											fontSize: 24,
											color: '#5F6475',
											fontWeight: 'bold',
											padding: [0, 0, 5, 0]
										},
										b: {
											fontSize: 12,
											color: '#555'
										}
									}
								}
							},
							data: [{
								value: 1,
								itemStyle: {
									color: 'transparent'
								}
							}]
						}
					]
			
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.main-card{
	margin: 10px 0;
}
.main-box{
	display: flex;
	justify-content: space-between;
}
.main-card-row1 {
	border-radius: 16rpx 16rpx 0 0;
	background: linear-gradient(270deg, #1078DE 0%, #43A2EB 100%);
	display: flex;
	justify-content: space-around;
	padding: 37rpx 0 31rpx 0;
	&>view {
		display: flex;
		flex-direction: column;
		align-items: center;
		&>span:first-child {
			font-weight: 700;
			margin-bottom: 5rpx;
			font-size: 16px;
		}
		&>span:last-child {
			font-size: 24rpx;
		}
	}
}
.main-card-row2 {
	border-radius: 0 0 16rpx 16rpx;
	box-shadow: 0rpx 30rpx 20rpx 1rpx rgba(51,149,231,0.26);
	background: linear-gradient(270deg, #1078DE 0%, #5FBAF2 100%);
	display: flex;
	
	.row2-left {
		padding: 34rpx 0 31rpx 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.row2-right {
		flex: 2;
		padding: 30rpx 10rpx 0;
		&>view {
			display: flex;
			
			&>span {
				flex: 1;
				&:nth-child(n+2) {
					font-weight: 700;
					font-size: 16px;
				}
			}
		}
	}
	.row2-label {
		font-size: 24rpx;
		color: rgba(255, 255, 255, .8);
	}
}

.dept-name {
	font-size: 34rpx;
	display: flex;
	padding: 30rpx 0 10rpx 30rpx;
}
.admin-card-content {
	padding: 0 20rpx 20rpx 20rpx;
	&>view {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		background: #F4F6F8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-bottom: 11rpx;
		
		&>view {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #5F6475;
			&>span:first-child {
				font-weight: 700;
				margin-bottom: 5rpx;
			}
			&>span:last-child {
				font-size: 24rpx;
			}
		}
	}
}
.dept-name{
    justify-content: space-between !important;
}
.u-icon--right{
	    margin-top: -10px;
	    margin-right: 20px!important;
}
.uni-page-head{
	height: auto!important;
}
.uni-page-wrapper {
    height: auto!important;
}
.main-bg{
    margin: 15px!important;
    background: white!important;
	padding: 12px!important;
    height: 260px!important;
}
uni-page-wrapper {
    background-color: #F5F8FB;
    height: auto !important;
}
uni-page-body {
    color: #303133;
    font-size: 19px;
    background: #f8fafc !important;
    padding-bottom: 20px;
}
.card-box {
    margin: 12px;
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 1px rgba(36, 111, 161, 0.06);
}
.card{
    border-radius: 10px;
    margin: 6px;
    background-color: #fff;
    box-shadow: 0px 0px 3px 1px rgba(36, 111, 161, 0.06);
}
.card-title{
    font-size: 20px;
    padding: 10px !important;
    border-bottom: 0 !important;
    color: #999 !important;
}
.u-loading-flower{
	margin: 10px auto;
	display: block;
}
.admin-card-content > uni-view{
	padding: 0;
}
.lime-echart__canvas{
	width: 200px!important;
	height: 200px!important;
}
</style>